<template>
  <div class="main">
    <el-row :gutter="30">
      <el-col v-for="(item,index) in table" :key="index">
        <el-card shadow="hover" @click.native="gotoPreview(index)">
          <div class="flex">
            <div class="left">
              <template>
                <div class="demo-image__preview">
                  <el-image
                    style="width: 10vw; height: 20vh;user-select: none"
                    :src="item.pic">
                  </el-image>
                </div>
              </template>
            </div>
            <div style="padding: 16px;height: 23vh" class="rightInfo">
              <div v-model="item.description" style="user-select: none">
                <strong>描述:</strong><br>{{ item.description | ellipsis }}
              </div>
              <br>
              <div v-model="item.contactInfo" style="user-select: none">
                <strong>联系方式:</strong><br>{{ item.contactInfo | ellipsis }}
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-count="pageCount"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange">
    </el-pagination>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Window",
  data() {
    return {
      table: [],
      pageSize: 8,
      pageCount: 1,
      currentPage: 1,
      srcList: [],
      search: "",
      tableDate: [],
    };
  },
  filters: {
    ellipsis(value) {
      if (value.length > 10) {
        return value.slice(0, 10) + '...'
      }
      return value
    }
  },
  methods: {
    async gotoPreview(index) {
      const res = await request.get("/api/message/getMessageByPage/" + this.currentPage + "/8");
      console.log(res.data.dataCurrentPage[index].id);
      this.$router.push({name: "preview", query: {id: res.data.dataCurrentPage[index].id}})
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      request.get("/api/message/getMessageByPage/" + val + "/8").then((res) => {
        console.log(res);
        this.table = res.data.dataCurrentPage;
        this.pageCount = res.data.totalPageNum;
      });
    },
  },
  mounted() {
    request.get("/api/message/getMessageByPage/1/8").then((res) => {
      console.log(this.pageSize);
      console.log(res);
      this.table = res.data.dataCurrentPage;
      this.pageCount = res.data.totalPageNum;
    });
  },
};
</script>

<style scoped lang="scss">

.main {
  padding-right: 7px;
  margin: 0;
  position: fixed;
}


.el-col {
  width: 25vw;
  margin-top: 1vw;
  margin-bottom: 1vw;
}

.el-card {
  background-color: lightcoral
}

.el-card:hover {
  background-color: palegoldenrod;
}

.flex {
  display: flex;
  align-items: center;
  height: 25vh;
}

.el-pagination {
  position: absolute;
  left: 42vw;
  top: 70vh;
}
</style>
